<template>
	<view>
		<view class="fixed">
			<!-- 状态栏 -->
			<view class="statusBar" :style="'height:'+statusBarHeight+'px'"></view>
			<view class="myheader padding-sm font-sub-title">
				我的
			</view>
		</view>
		<block v-if="role=='user'">
			<view class="cu-list menu sm-border" :style="{marginTop:navHeight}">
				<view class="cu-item arrow" @tap="jump('/pages/user/info')" style="height: 90px;">
					<view class="content padding-tb-sm">
						<view>
							<jy-image placeholder='/static/loading.gif' class="cu-avatar margin-left my-avatar" :src="avatar"></jy-image>
							<view class="margin-left">
								<text class="font-normal">{{userInfo.NAME}}</text>
								<view class="text-gray font-small">{{userInfo.PHONE}}</view>
							</view>
						</view>
					</view>
					<view class="action">
						<text class="text-gray font-small">编辑个人信息</text>
					</view>
				</view>
				<view class="cu-item arrow" @click="goDevice()">
					<view class="content">
						<text class="cuIcon-repair text-blue"></text>
						<text class="font-normal">我的设备</text>
					</view>
					<view class="action">
						<text class="text-gray font-small">进行设备设置</text>
					</view>
				</view>
				<view class="cu-item arrow" @tap="jump('/pages/user/bind')">
					<view class="content">
						<text class="cuIcon-friend text-orange"></text>
						<text class="font-normal">绑定亲属</text>
					</view>
					<view class="action">
						<text class="text-gray font-small">绑定2条亲属关系</text>
					</view>
				</view>
				<view class="cu-item arrow" @tap="jump('/pages/user/addfollow')">
					<view class="content">
						<text class="cuIcon-roundadd text-mauve"></text>
						<text class="font-normal">添加关注</text>
					</view>
					<view class="action">
						<text class="text-gray font-small">申请添加关注他人</text>
					</view>
				</view>
				<view class="cu-item arrow" @tap="jump('/pages/user/follow')">
					<view class="content">
						<text class="cuIcon-like text-pink"></text>
						<text class="font-normal">关注请求</text>
					</view>
					<view class="action">
						<text class="text-red font-small" v-if="followNum!=0">您有{{followNum}}条关注请求</text>
						<text class="text-gray font-small" v-else>暂无请求</text>
					</view>
				</view>
				<!-- 				<view class="cu-item arrow" @tap="jump('/pages/signDoctor/index')">
					<view class="content">
						<text class="cuIcon-profile text-yellow"></text>
						<text class="font-normal">签约医生</text>
					</view>
					<view class="action">
						<text class="text-gray font-small">与医生建立签约关系</text>
					</view>
				</view>
				<view class="cu-item arrow" @tap="jump('/pages/signDoctor/nurse')">
					<view class="content">
						<text class="cuIcon-profile text-olive"></text>
						<text class="font-normal">签约护士</text>
					</view>
					<view class="action">
						<text class="text-gray font-small">与护士建立签约关系</text>
					</view>
				</view> -->
				<view class="cu-item arrow" @tap="jump('/pages/elecfence/index')">
					<view class="content">
						<text class="cuIcon-circle text-green"></text>
						<text class="font-normal">电子围栏</text>
					</view>
					<view class="action">
						<text class="text-gray font-small">设定电子围栏</text>
					</view>
				</view>
				<!-- <view class="cu-item arrow" @tap="showPop" data-target="Modal" >
					<view class="content">
						<text class="cuIcon-settings text-brown"></text>
						<text class="font-normal">参数设置</text>
					</view>
					<view class="action">
						<text class="text-gray font-small">设置手表健康指标的采样周期</text>
					</view>
				</view> -->
				<!-- <view class="cu-item arrow" @tap="jump('/pages/health/report/index')">
					<view class="content">
						<text class="cuIcon-text text-cyan"></text>
						<text class="font-normal">健康报告</text>
					</view>
					<view class="action">
						<text class="text-gray font-small">查看我的健康报告</text>
					</view>
				</view> -->
				<view class="cu-item arrow" @tap="call()">
					<view class="content">
						<text class="cuIcon-service text-red"></text>
						<text class="font-normal">紧急呼叫</text>
					</view>
					<view class="action">
						<text class="text-gray font-small">呼叫健康服务中心，寻求帮助</text>
					</view>
				</view>
				<view class="cu-item arrow" @tap="jump('/pages/user/modify')">
					<view class="content">
						<text class="cuIcon-lock text-purple"></text>
						<text class="font-normal">修改密码</text>
					</view>
					<view class="action">
						<text class="text-gray font-small">修改密码后立即生效</text>
					</view>
				</view>
				<view class="cu-item arrow" @tap="medicalAuth">
					<view class="content">
						<text class="cuIcon-roundcheck text-yellow"></text>
						<text class="font-normal">医护认证</text>
					</view>
					<view class="action">
						<text class="text-gray font-small">提交审核通过即可成为医护用户</text>
					</view>
				</view>
				<view class="cu-item arrow" @tap="showToggleModal" v-if="isToggle">
					<view class="content">
						<text class="cuIcon-group text-orange"></text>
						<text class="font-normal">切换角色</text>
					</view>
					<view class="action">
						<text class="font-small text-gray">一键切换医护用户</text>
					</view>
				</view>
				<view class="cu-item arrow" @click="checkUpdate()">
					<view class="content">
						<text class="cuIcon-down text-blue"></text>
						<text class="font-normal">检查更新</text>
					</view>
					<view class="action">
						<text class="text-gray font-small">v{{appInfo.version}}</text>
					</view>
				</view>
				<view class="cu-item arrow">
					<view class="content">
						<text class="cuIcon-edit text-gray"></text>
						<button open-type="feedback" hover-class='none' class="font-normal feedback">用户反馈</button>
					</view>
					<view class="feedback_action">
						<button open-type="feedback" class="text-gray font-small">反馈问题及意见</button>
					</view>
				</view>
				<view class="cu-item arrow" @tap="jump('/pages/help/help')">
					<view class="content">
						<text class="cuIcon-questionfill text-red"></text>
						<text class="font-normal">使用帮助</text>
					</view>
					<view class="action">
						<text class="font-small text-gray">提供APP的相关使用帮助</text>
					</view>
				</view>
				<!-- 				<view class="cu-item arrow">
					<view class="content">
						<text class="cuIcon-picfill text-black"></text>
						<text class="font-normal">图片缓存</text>
					</view>
					<view class="action" @click="makeClean">
						<text class="font-small text-gray">清理缓存({{size}})</text>
					</view>
				</view> -->
				<!-- <view class="cu-item arrow">
					<input v-model="test" />
					<button @click="send">发送</button>
				</view> -->
				<view class="cu-item" @tap="showModal">
					<view class="btn-logout font-normal">
						<text>注销登录</text>
					</view>
				</view>
			</view>
		</block>
		<block v-else>
			<view class="cu-list menu sm-border" :style="{marginTop:navHeight}">
				<view class="cu-item arrow" @tap="jump('/pages/user/medicalInfo')" style="height: 90px;">
					<view class="content padding-tb-sm">
						<view>
							<view class="cu-avatar xl round margin-left" :style="{backgroundImage:'url('+avatar+')'}"></view>
							<view class="margin-left">
								<text class="font-normal">{{userInfo.NAME}}</text>
								<view class="text-gray font-small">{{userInfo.PHONE}}</view>
							</view>
						</view>
					</view>
					<view class="action">
						<text class="text-gray font-small">编辑个人信息</text>
					</view>
				</view>
				<view class="cu-item arrow" @tap="jump('/pages/user/signuser')">
					<view class="content ">
						<text class="cuIcon-text text-cyan"></text>
						<text class="font-normal">签约请求</text>
					</view>
					<view class="action">
						<text class="font-small text-red" v-if="signNum!=0">您有{{signNum}}个签约请求</text>
						<text class="font-small text-gray" v-else>暂无请求</text>
					</view>
				</view>
				<view class="cu-item arrow" @tap="jump('/pages/user/modify')">
					<view class="content">
						<text class="cuIcon-lock text-purple"></text>
						<text class="font-normal">修改密码</text>
					</view>
					<view class="action">
						<text class="font-small text-gray">修改密码后立即生效</text>
					</view>
				</view>
				<view class="cu-item arrow" @tap="showToggleModal">
					<view class="content ">
						<text class="cuIcon-group text-orange"></text>
						<text class="font-normal">切换角色</text>
					</view>
					<view class="action">
						<text class="font-small text-gray">一键切换普通用户</text>
					</view>
				</view>
				<view class="cu-item arrow" @click="checkUpdate()">
					<view class="content">
						<text class="cuIcon-down text-blue"></text>
						<text class="font-normal">检查更新</text>
					</view>
					<view class="action">
						<text class="text-gray font-small">v{{appInfo.version}}</text>
					</view>
				</view>
				<view class="cu-item arrow">
					<view class="content">
						<text class="cuIcon-questionfill text-gray"></text>
						<button open-type="feedback" hover-class='none' class="font-normal feedback">用户反馈</button>
					</view>
					<view class="feedback_action">
						<button open-type="feedback" class="text-gray font-small">反馈问题及意见</button>
					</view>
				</view>
				<view class="cu-item arrow" @tap="jump('/pages/help/help')">
					<view class="content">
						<text class="cuIcon-questionfill text-red"></text>
						<text class="font-normal">使用帮助</text>
					</view>
					<view class="action">
						<text class="font-small text-gray">提供APP的相关使用帮助</text>
					</view>
				</view>
				<!-- <view class="cu-item arrow">
					<view class="content">
						<text class="cuIcon-picfill text-black"></text>
						<text class="font-normal">图片缓存</text>
					</view>
					<view class="action" @click="makeClean">
						<text class="font-small text-gray">清理缓存({{size}})</text>
					</view>
				</view> -->
				<view class="cu-item" @tap="showModal">
					<view class="btn-logout font-normal">
						<text>注销登录</text>
					</view>
				</view>
			</view>
		</block>
		<view class="cu-modal" :class="modalName=='Modal'?'show':''" @touchmove.stop.prevent="()=>{}">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">参数设置</view>
					<view class="action" @tap="hidePop">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl">
					心率周期（分钟）：
					<slider class="slider" v-model="timerA" @change="sliderChangeA" min="1" max="60" show-value />
					GPS周期（分钟）：
					<slider class="slider" v-model="timerB" @change="sliderChangeB" min="1" max="60" show-value />
					体温周期（分钟）：
					<slider class="slider" v-model="timerC" @change="sliderChangeC" min="1" max="60" show-value />
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn line-blue text-blue" @tap="hidePop">取消</button>
						<button class="cu-btn bg-blue margin-left" @tap="confirm">确定</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import md5 from '@/common/lib/md5.min.js'
	import APPUpdate from "@/js_sdk/zhouWei-APPUpdate/APPUpdate/index.js";
	import _config from '../../config/index.js'; // 导入私有配置
	import {
		mapGetters
	} from 'vuex'
	var that;
	const bandSDK = uni.requireNativePlugin('BandSDK')
	export default {
		computed: {
			...mapGetters(['navHeight', 'version']),
		},
		data() {
			return {
				appInfo: {
					version: '',
					name: ''
				},
				isToggle: uni.getStorageSync("isToggle") || false,
				modalName: '',
				user: '',
				item: {
					oldPassword: '',
					newPassword: ''
				},
				avatar: _config.NGINX_SERVER + 'imgs/avatar/avatar.jpg',
				userInfo: {},
				role: uni.getStorageSync("role"),
				followNum: 0, //关注请求数
				signNum: 0, //签约请求数

				timerA: 10, //周期
				timerB: 30,
				timerC: 10,

				test: '',
			}
		},
		onShow() {
			this.userInfo = uni.getStorageSync("userInfo");
			this.user = uni.getStorageSync("userInfo")
			this.avatar = that.user.AVATAR ? that.user.AVATAR : _config.NGINX_SERVER + 'imgs/avatar/avatar.jpg'
			this.followNum = uni.getStorageSync("followNum") || 0
			this.signNum = uni.getStorageSync("signNum") || 0
		},
		onLoad() {
			that = this;
			this.user = uni.getStorageSync("userInfo")
			this.userInfo = uni.getStorageSync("userInfo");
			//#ifdef APP-PLUS
			this.statusBarHeight = plus.navigator.getStatusbarHeight()
			plus.runtime.getProperty(plus.runtime.appid, (wgtinfo) => {
				this.appInfo.version = wgtinfo.version
				this.appInfo.name = wgtinfo.name
			})
			//#endif
		},
		methods: {
			//医护认证
			medicalAuth(){
				this.$http.getMedicalAuthInfo({
					phone:that.userInfo.PHONE
				}).then(res=>{
					if(res.result=="exception"){
						that.jump('/pages/user/medicalAuth?flag=false')
					}else if(res.code==1){
						
						if(res.result==null){
							uni.showToast({
								title:"认证审核中，请耐心等待",
								position:"bottom",
								icon:"none"
							})
							return;
						}
						var status = res.result.PASS_FLAG||-1;
						if(status==-1){
							uni.showToast({
								title:"认证审核中，请耐心等待",
								position:"bottom",
								icon:"none"
							})
						}else if(status == 1){
							uni.showToast({
								title:"审核通过，重新登录即可进入医护界面",
								position:"bottom",
								icon:"none"
							})
						}else{
							uni.showModal({
								title: '温馨提示',
								content: '审核被拒绝，请重新提交认证',
								success: function (res) {
									if (res.confirm) {
										that.jump('/pages/user/medicalAuth?flag=true')
									}
								}
							});
							
						}
					}
				})
			},
			send() {
				bandSDK.appSengMessageToDevice({
					type: 1,
					title: "X",
					content: that.test
				}, res => {
					that.test = ''
				})
			},
			sliderChangeA(e) {
				this.timerA = e.detail.value
			},
			sliderChangeB(e) {
				this.timerB = e.detail.value
			},
			sliderChangeC(e) {
				this.timerC = e.detail.value
			},
			showPop(e) {
				this.timerA = uni.getStorageSync("timerA") || 10
				this.timerB = uni.getStorageSync("timerB") || 30
				this.timerC = uni.getStorageSync("timerC") || 10
				this.modalName = e.currentTarget.dataset.target
			},
			hidePop(e) {
				this.modalName = null
			},
			confirm() {
				this.$http.setPeriod({
					cycleType: 1,
					cycle: that.timerA
				}).then(res => {
					if (res.code == 1) {
						this.$http.setPeriod({
							cycleType: 2,
							cycle: that.timerB
						}).then(res => {
							if (res.code == 1) {
								this.$http.setPeriod({
									cycleType: 3,
									cycle: that.timerC
								}).then(res => {
									if (res.code == 1) {
										uni.showToast({
											title: "设置成功！",
											icon: "success"
										})
										uni.setStorageSync("timerA", that.timerA)
										uni.setStorageSync("timerB", that.timerB)
										uni.setStorageSync("timerC", that.timerC)
										that.hidePop()
									} else {
										uni.showToast({
											title: "设置失败，请重试！",
											icon: "none",
											position: "bottom"
										})
									}
								})
							} else {
								uni.showToast({
									title: "设置失败，请重试！",
									icon: "none",
									position: "bottom"
								})
							}
						})
					} else {
						uni.showToast({
							title: "设置失败，请重试！",
							icon: "none",
							position: "bottom"
						})
					}
				})
			},
			call() {
				uni.makePhoneCall({
					phoneNumber: '114' //仅为示例
				});
			},
			showModal(e) {
				uni.showModal({
					title: '温馨提示',
					content: '您确定退出登录吗？',
					success: function(res) {
						if (res.confirm) {
							that.logout()
						}
					}
				});
			},
			showToggleModal(e) {
				var title = "";
				var role = uni.getStorageSync("role")
				if (role == 'user') {
					title = '您确定切换到医护用户吗？'
				} else {
					title = '您确定切换到普通用户吗？'
				}
				uni.showModal({
					title: '温馨提示',
					content: title,
					success: function(res) {
						if (res.confirm) {
							uni.closeSocket()
							if (uni.getStorageSync("role") == 'user') {
								var params = uni.getStorageSync("autoInfo")
								uni.setStorageSync("isToggle", false)
								that.$store.dispatch('login', params).then(res => {
									if (res.code == 1) {
										uni.showToast({
											icon: 'success',
											title: '切换成功 '
										});
										uni.removeStorageSync("userInfo")
										uni.setStorageSync("userInfo", res.result)
										uni.setStorageSync("role", 'medicalstaff')
										uni.setStorageSync("token", res.result.token)
										uni.reLaunch({
											url: '/pages/index/index',
										})
									} else {
										uni.showToast({
											title: res.message,
											icon: 'none',
											position: 'bottom'
										})
									}
								})
							} else {
								that.$http.registerOrLogin({}).then(res => {
									if (res.code == 1) {
										var params = uni.getStorageSync("autoInfo")
										uni.request({
											url: _config.serverUrl + '/u/registOrLogin',
											method: 'POST',
											data: {
												username: params.phone,
												password: params.password,
												cid: uni.getStorageSync("cid")
											},
											dataType: "json",
											success(result) {
												if (result.data.status == 200) {
													uni.setStorageSync("userId", result.data.data.id);

													that.$store.dispatch('WEBSOCKET_INIT');

													uni.showToast({
														icon: 'success',
														title: '切换成功 '
													});
													params.flag = true;
													uni.setStorageSync("autoInfo", params);
													//增加是否是医护一键切换的普通用户标识
													uni.setStorageSync("isToggle", true)
													uni.removeStorageSync("userInfo")
													uni.setStorageSync("userInfo", res.result)
													uni.setStorageSync("role", 'user')
													uni.setStorageSync("token", res.result.token)
													uni.reLaunch({
														url: '/pages/index/index',
													})
												}
											}
										})
									} else {
										uni.showToast({
											title: res.message,
											icon: 'none',
											position: 'bottom'
										})
									}
								})
							}
						}
					}
				});
			},
			jump(path) {
				uni.navigateTo({
					url: path
				})
			},
			goDevice() {
				bandSDK.connectState(res => {
					if (res != "connected") {
						uni.showToast({
							"title": "手环未连接",
							"position": "bottom",
							"icon": "none"
						})
					} else {
						uni.navigateTo({
							url: "/pages/equipment/device"
						})
					}
				})
			},
			okClick() {
				const params = {
					id: this.user.id,
					password: md5(this.item.oldPassword),
					newpw: md5(this.item.newPassword)
				}
				this.$minApi.editUserPwd(params).then(res => {
					if (res) {
						this.$refs.modifyPassPopup.close()
						uni.showToast({
							title: '修改成功',
							icon: 'none'
						})
						setTimeout(() => {
							this.logout()
						}, 2000)
					} else {
						uni.showToast({
							title: '原密码不正确！',
							icon: 'none'
						})
					}
				})
			},
			modifyPass() {
				this.$refs.modifyPassPopup.open()
			},
			checkUpdate() {
				APPUpdate(true);
			},
			logout() {
				this.$store.dispatch('logout', false)
				uni.reLaunch({
					url: '/pages/login/login'
				})
			}
		}
	}
</script>

<style>
	.btn-logout {
		color: red;
		text-align: center;
		margin: 0 auto;
	}

	.text-gray {
		color: #878A99;
	}

	.cu-item {
		height: 108rpx;

	}

	.cu-item:hover {
		background: rgba(225, 225, 225, 0.3) !important;
	}

	.cu-avatar {
		border-radius: 5px;
	}

	.my-avatar {
		width: 100rpx;
		height: 100rpx;
	}

	button::after {
		border: none;
	}

	.feedback {
		width: 550rpx;
		margin: 0;
		padding: 0;
		background: none;
		display: inline-flex;
	}

	.action {
		background-color: #F8F8F8;
		padding: 10rpx 25rpx;
		border-radius: 5px;
	}

	.feedback_action {
		position: absolute;
		right: 90upx;
	}
</style>
